<template>
  <div class="login">
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
      <FormItem prop="user">
        <Input type="text" v-model="formInline.user" placeholder="用户名">
          <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem prop="password">
        <Input type="password" v-model="formInline.password" placeholder="密码">
          <Icon type="ios-lock-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import {LoginApi} from "../request/api.js";
export default {
  data() {
    return {
      formInline: {
        user: "",
        password: ""
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "账号不为空",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          console.log(this.formInline)
          let fromdata = {
            username:this.formInline.user,
            password:this.formInline.password
          };
          LoginApi(fromdata).then(res=>{
            if(res.success){
              localStorage.setItem("token",res.data);
              this.$router.push("/Manage")
            }else{
              console.log("账号或密码错误");
            }
          })



          this.$Message.success("Success!");

        } else {
          this.$Message.error("Fail!");
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.login {
  width:300px;
  height:200px;
  margin:0 auto;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  .ivu-form-item.ivu-form-item-required{
    display:block;
  }
}
</style>